<!--
 * @Author: coman
 * @LastEditors: coman
 * @Date: 2020-06-23 12:38:56
 * @motto: No pain,No gain
 * @LastEditTime: 2020-06-23 22:37:30
--> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            margin-top: 5px;
            width: 100%;
            border: 1px solid #ccc;
            border-collapse: collapse;
            border-spacing: 0px;
        }

        table td {
            width: 20%;
            border: 1px solid #ccc;
            height: 30px;
        }
    </style>
</head>
<body>
    行<input type="text" name="" id="num1">
    列<input type="text" id="num2">
    <button id="btn">生成</button>
    <div id="output">

    </div>
    <script>
        var btn = document.querySelector("#btn");
        btn.onclick=function(){
            var ouput = document.querySelector("#output")
            var num1=document.querySelector("#num1").value;
            var num2=document.querySelector("#num2").value;
            var table = document.createElement('table');
            var tbody = document.createElement('tbody');
            ouput.innerHTML="";
            table.appendChild(tbody);
            for(var i=0;i<num1;i++){
                var btn1 = document.createElement('button');
                 btn1.innerHTML="复制";
                var btn2 = document.createElement('button');
                btn2.innerHTML="删除";
                 var tr=document.createElement('tr');
                for(var j=0;j<num2;j++){
                    var td=document.createElement('td');
                    tr.appendChild(td);
                }
                // console.log( tr.lastElementChild);
                // 给btn绑定id
                tr.lastElementChild.appendChild(btn1);
                tr.lastElementChild.appendChild(btn2);
                tbody.appendChild(tr);
            }
            output.appendChild(table);
           (function addEvent(){
                var btn_list= document.querySelectorAll("tbody button");
                for(var i=0;i<btn_list.length;i++){
                    if(i%2==0){
                        btn_list[i].onclick=function(){
                        var tr_new = this.parentNode.parentNode.cloneNode(true);
                        tbody.appendChild(tr_new);
                        addEvent();
                        }
                        }else{
                            btn_list[i].onclick=function(){
                                tbody.removeChild(this.parentNode.parentNode);
                            }
                        }
                
                }
           })()
           
        }
     
        
    </script>
</body>
</html>